<template>
  <div class="tools-list">
    <template v-if="toolsData && toolsData.length >0">
      <newest-tool-item v-for="(item, key) in toolsData"
        :toolPosIndex="key"
        :toolPosition="toolPosition"
        :toolData="item"
        :key="`${item.handle}-${key}`"></newest-tool-item>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'NewestTools',
  props: {
    toolsData: {
      type: Array | null,
      default: [],
    },
    toolPosition: {
      type: String,
      default: '',
    },
  },
  //TODO
  watch: {
    toolsData: {
      handler() {
        if (this.toolsData && this.toolsData.length > 0) {
          this.toolsData.forEach((item) => {
            item.loading = false
            if (item && item.image) {
              let iSrc = item.image
              if (iSrc.indexOf('x-oss-process') === -1) {
                iSrc = `${iSrc}${
                  iSrc.indexOf('?') === -1 ? '?' : '&'
                }x-oss-process=image/resize,l_450,m_lfit`
              }
              if (
                iSrc.indexOf(
                  'https://nav-station.oss-accelerate.aliyuncs.com'
                ) >= 0
              ) {
                iSrc = iSrc.replace(
                  'https://nav-station.oss-accelerate.aliyuncs.com',
                  'https://cdn-images.toolify.ai'
                )
              }
              item.image = iSrc
            }
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>
